<template>
  <el-row class="mod-config">
    <el-card>
      <el-form :inline="true" :model="dataForm" ref="linetypesearchform" @keyup.enter.native="getDatalinetypeList()">
        <el-row>
          <el-form-item class="el-col-7" prop="typeNumber" label="类型编号">
            <el-input v-model="dataForm.typeNumber" placeholder="类型编号" clearable></el-input>
          </el-form-item>
          <el-form-item class="el-col-7" prop="name" label="类型名称">
            <el-input v-model="dataForm.name" placeholder="线路名称" clearable></el-input>
          </el-form-item>
          <el-form-item class="el-col-7" prop="startAgencyType" label="起始机构类型">
            <el-select v-model="dataForm.startAgencyType" placeholder="起始机构类型">
              <el-option label="请选择" value="0" aria-selected="true" ></el-option>
              <el-option
                v-for="item in aglist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="el-col-7" prop="endAgencyType" label="目的机构类型">
            <el-select v-model="dataForm.endAgencyType" placeholder="目的机构类型">
              <el-option label="请选择" value="0" aria-selected="true" ></el-option>
              <el-option
                v-for="item in aglist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button class="el-button--primary" @click="getDatalinetypeList()">查询</el-button>
            <el-button class="el-button--warning" @click="linetyperesetdateform('linetypesearchform')">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <el-row>
        <el-button class="el-button--success" @click="addlinetypeVisible = true">+新增线路类型</el-button>
      </el-row><br>
      <el-table
        :data="datalinetypeList"
        border
        v-loading="datalinetypeListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          prop="typeNumber"
          header-align="center"
          align="center"
          label="线路类型编号">
        </el-table-column>
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="线路类型名称">
        </el-table-column>
        <el-table-column
          prop="startAgencyTypename"
          header-align="center"
          align="center"
          label="起始地机构类型">
        </el-table-column>
        <el-table-column
          prop="endAgencyTypename"
          header-align="center"
          align="center"
          label="目的地机构类型">
        </el-table-column>
        <el-table-column
          prop="lastUpdateTime"
          header-align="center"
          align="center"
          label="最近更新时间 ">
        </el-table-column>
<!--        <el-table-column
          prop="updater"
          header-align="center"
          align="center"
          label="更新人">
        </el-table-column>-->
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="200"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="getlinetypeinfo(scope.row.id)">修改</el-button>&nbsp;
            <el-button type="text" size="small" @click="deletelinetype(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>


    <el-dialog custom-class="addlinetypewidth" title="新增线路类型" :visible.sync="addlinetypeVisible" :close-on-click-modal="false">

      <el-tabs type="border-card">
        <el-form ref="addlinetypeform" label-width="100px">
          <el-row>
            <el-form-item class="el-col-15" prop="typeNumber" label="类型编号">
              <el-input v-model="adddataForm.typeNumber" placeholder="类型编号" clearable></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="el-col-15" prop="name" label="类型名称">
              <el-input v-model="adddataForm.name" placeholder="线路名称" clearable></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="el-col-15" prop="startAgencyType" label="起始机构类型">
              <el-select v-model="adddataForm.startAgencyType" placeholder="起始机构类型">
                <el-option label="请选择" value="0" aria-selected="true" ></el-option>
                <el-option
                  v-for="item in aglist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="el-col-15" prop="endAgencyType" label="终点机构类型">
              <el-select v-model="adddataForm.endAgencyType" placeholder="终点机构类型">
                <el-option label="请选择" value="0" aria-selected="true" ></el-option>
                <el-option
                  v-for="item in aglist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

        </el-form>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addlinetypeSubmit()">保存</el-button>
        <el-button @click="addlinetypeVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog custom-class="addlinetypewidth" title="修改线路类型" :visible.sync="updatelinetypeVisible" :close-on-click-modal="false">

      <el-tabs type="border-card">
        <el-form ref="updatelinetypeform"  label-width="100px">
          <el-row>
            <el-form-item class="el-col-15" prop="typeNumber" label="类型编号">
              <el-input v-model="updatedataForm.typeNumber" placeholder="类型编号" clearable></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="el-col-15" prop="name" label="类型名称">
              <el-input v-model="updatedataForm.name" placeholder="线路名称" clearable></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="el-col-15" prop="startAgencyType" label="起始机构类型">
              <el-select v-model="updatedataForm.startAgencyType" placeholder="起始机构类型">
                <el-option label="请选择" value="0" aria-selected="true" ></el-option>
                <el-option
                  v-for="item in aglist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item class="el-col-15" prop="endAgencyType" label="终点机构类型">
              <el-select v-model="updatedataForm.endAgencyType" placeholder="终点机构类型">
                <el-option label="请选择" value="0" aria-selected="true" ></el-option>
                <el-option
                  v-for="item in aglist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updatelinetype()">确定</el-button>
        <el-button @click="updatelinetypeVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>
<!--

<el-row>
            <span class="el-col-7" style="font-size: 18px;color: skyblue;" id="driversum"></span>
            <span class="el-col-7" style="font-size: 18px;color: skyblue;" id="dfdriver"></span>
            <span class="el-col-7" style="font-size: 18px;color: skyblue;" id="ztdriver"></span>
            <br>
            <span class="el-col-7" style="font-size: 12px;">司机总数</span>
            <span class="el-col-7" style="font-size: 12px;">待发车司机</span>
            <span class="el-col-7" style="font-size: 12px;">在途司机</span>
          </el-row>



          methods: {
    getdriversum(){
      getalldriver().then(({data}) => {
        document.getElementById("driversum").innerHTML = data
      })
    },
    getdfdriver(){
      getalldfdriver().then(({data}) => {
        document.getElementById("dfdriver").innerHTML = data
      })
    },
    getztdriver(){
      getallztdriver().then(({data}) => {
        document.getElementById("ztdriver").innerHTML = data
      })
    },

  }

-->

<style>
.addlinewidth {
  width: 40%;
}
</style>

<script src="src/api/work.js"></script>
<script>
import {
  addlinetype, dellinetypebyid, getlinetypedetails, getlinetypeinfo, updatelinetypebyid,
} from '../../../api/base'
import {getagency} from '../../../api/agency'

export default {
  data() {
    return {
      dataForm: {
        typeNumber: '',
        name: '',
        startAgencyType: '',
        endAgencyType: '',
      },
      adddataForm: {
        typeNumber: '',
        name: '',
        startAgencyType: '',
        endAgencyType: '',
      },
      updatedataForm: {
        id: '',
        typeNumber: '',
        name: '',
        startAgencyType: '',
        endAgencyType: '',
      },
      detailtripsdataForm:{
        tripsransportLine: '',
        tripsname: '',
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: null,
      datalinetypeListSelections: [],
      addlinetypeVisible: false,
      datalinetypeList: [],
      datalinetypeListLoading: false,
      item: {
        type: '',
        lable: ''
      },
      updatelinetypeVisible: false,
      aglist: []
    }
  },
  mounted() {
    this.getDatalinetypeList()
    this.getagencylist()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    linetyperesetdateform() {
      this.$refs['linetypesearchform'].resetFields();
      this.getDatalinetypeList();
    },
    // 获取数据列表
    getDatalinetypeList() {
      this.datalinetypeListLoading = true
      let params = {
        'pageno': this.pageIndex,
        'pagesize': this.pageSize,
        'typeNumber': this.dataForm.typeNumber,
        'name': this.dataForm.name,
        'startAgencyType': this.dataForm.startAgencyType,
        'endAgencyType': this.dataForm.endAgencyType,
      }
      getlinetypeinfo(params).then(({data}) => {
          if (data && data.code == 0) {
            this.datalinetypeList = data.linetype.rows
            this.totalPage = data.linetype.total
          } else {
            this.dataList = []
            this.totalPage = 0
          }
        this.datalinetypeListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDatalinetypeList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDatalinetypeList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.datalinetypeListSelections = val
    },

    addlinetypeSubmit() {
      let params = {
        'typeNumber': this.adddataForm.typeNumber,
        'name': this.adddataForm.name,
        'startAgencyType': this.adddataForm.startAgencyType,
        'endAgencyType': this.adddataForm.endAgencyType,
      }
      addlinetype(params).then(({data}) => {
          if (data && data.code == 0) {
            this.$message({
              message: '新增成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.addlinetypeVisible = false
                this.$refs['addlinetypeform'].resetFields()
                this.getDatalinetypeList()
              }
            })
          }
      })

    },
    getlinetypeinfo(id){
      this.updatelinetypeVisible = true;
      getlinetypedetails(id).then(({data}) => {
        this.updatedataForm.id =data.id
        this.updatedataForm.typeNumber =data.typeNumber
        this.updatedataForm.name =data.name
        this.updatedataForm.startAgencyType =data.startAgencyType
        this.updatedataForm.endAgencyType =data.endAgencyType
        })
    },
    updatelinetype(){
      let params = {
        'id' : this.updatedataForm.id,
        'typeNumber' : this.updatedataForm.typeNumber,
        'name' : this.updatedataForm.name,
        'startAgencyType' : this.updatedataForm.startAgencyType,
        'endAgencyType' : this.updatedataForm.endAgencyType,
      }
      updatelinetypebyid(params).then(({data}) => {
        if (data && data.code == 0) {
          this.$message({
            message: '修改成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.updatelinetypeVisible = false;
              this.getDatalinetypeList()
            }
          })
        }
      })
    },

    deletelinetype(id){
      dellinetypebyid(id).then(({data}) => {
        if (data && data.code == 0) {
          this.$message({
            message: '删除成功',
            type: 'error',
            duration: 1500,
            onClose: () => {
              this.getDatalinetypeList()
            }
          })
        }
      })
    },

    getagencylist(){
      getagency().then(({data}) => {
        this.aglist = data.agency;
      })
    },

    }
}

/*

*  */
</script>
